import { Input, Button , DatePicker, Table, Space,Divider ,Select } from 'antd';
import { PlusOutlined,PaperClipOutlined } from '@ant-design/icons';
const { Search } = Input;
import React, { useState, useRef} from 'react';

const { Option } = Select;
import { GridContent } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';

import ProTable, { TableDropdown } from '@ant-design/pro-table';
import styles from './style.less'
import DataSet from '@antv/data-set';




const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const Log: React.FC = () => {
  type GithubIssueItem = {
    id: number;
    creatTime: date;//		操作时间
    userName:string;//	操作人
    ip: string;//		操作ip
    operation: string;//			操作
  };
  const tableListDataSource: GithubIssueItem[] = [];
  
  
  for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
      id: i,
      creatTime:new Date(),
      userName:'操作人',
      ip:'172.16.99.188',
      operation:"删除",
    });
  }
  



  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '操作时间',
      dataIndex: 'creatTime',
      valueType: 'date',
    },
    {
      title: '操作人',
      dataIndex: 'userName',
   
    },  {
      title: 'IP地址',
      dataIndex: 'ip',
     
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a
          key="editable"
        >
          编辑
        </a>,
        <Divider type="vertical" />,
        <a
          key="delete"
        >
          删除
        </a>,
      ],
    },
  ];
  
  
  const onSearch = value => console.log(value);

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<GithubIssueItem[]>([]);
    
  const ref = useRef<ActionType>();
    return (
      <GridContent>
      <React.Fragment>
    
        <ProTable<GithubIssueItem>
          actionRef={ref}
          columns={columns}
          options={false}
          dateFormatter="string"
          search={{
            defaultCollapsed: false,
            span: 6,
            labelWidth: 'auto',
          }}
          request={(params, sorter, filter) => {
        // 表单搜索项会从 params 传入，传递给后端接口。
        console.log(params, sorter, filter);
        return Promise.resolve({
          data: tableListDataSource,
          success: true,
        });
      }}
      rowKey="key"
      collapseRender={null}
      pagination={{
        showQuickJumper: true,
      }}
   
      dateFormatter="string"
      headerTitle=""
      toolBarRender={() => [
        <Button key="show">查看日志</Button>,
        <Button key="out">
          导出数据
          <PaperClipOutlined />
        </Button>,
        <Button type="primary" key="primary">
          创建应用
        </Button>,
      ]}
    />
        </React.Fragment>
      </GridContent>
    );
};

export default Log;